<template>
    <div class="container">
      <!-- Breadcrumb navigation with styling -->
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item>
          <router-link to="/user/location">党建地点</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>党建地点详细信息</el-breadcrumb-item>
      </el-breadcrumb>
  
      <!-- Outer Card wrapping the content -->
      <el-card class="main-card">
        <div class="content">
          <div class="location-detail">
            <!-- Location image -->
            <el-card class="image-card">
              <img
                v-if="locationDetails.photo"
                :src="locationDetails.photo"
                alt="Location Image"
                class="location-image"
              />
            </el-card>
  
            <div class="location-info">
              <h2>{{ locationDetails.name }}</h2>
              <p><strong>预约人数:</strong> {{ locationDetails.balance }}</p>
              <p><strong>类型:</strong> {{ locationDetails.type }}</p>
            </div>
  
            <div class="location-description">
              <h3>详细信息</h3>
              <p>{{ locationDetails.content }}</p>
            </div>
          </div>
  
          <!-- 推荐位置 -->
          <div class="recommendations">
            <h3>系统推荐</h3>
            <el-row :gutter="20" class="recommendation-list">
              <el-col
                v-for="location in recommendedLocations"
                :key="location.id"
                :span="24"
                class="recommendation-item"
              >
                <el-card>
                  <img
                    :src="location.photo"
                    alt="推荐地点"
                    class="recommendation-image"
                  />
                  <div class="recommendation-name">{{ location.name }}</div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-card>
    </div>
  </template>
  
  
  <script>
  import { selectByNameService, LocationListService } from '@/api/location.js';
  
  export default {
    data() {
      return {
        locationId: this.$route.params.locationId,
        locationName: this.$route.params.locationName,
        locationDetails: {},
        allLocations: [],
        recommendedLocations: [],
      };
    },
    created() {
      this.fetchLocationDetails();
      this.fetchAllLocations();
    },
    methods: {
      async fetchLocationDetails() {
        try {
          const response = await selectByNameService(this.locationName);
          this.locationDetails = response.data[0] || {};
          console.log('Location Details:', this.locationDetails);
        } catch (error) {
          console.error('Error fetching location details:', error);
        }
      },
  
      async fetchAllLocations() {
        try {
          const response = await LocationListService({ page: 1, size: 10 });
          this.allLocations = response.data.list;
          this.getRecommendedLocations();
          console.log('All Locations:', this.allLocations);
        } catch (error) {
          console.error('Error fetching all locations:', error);
        }
      },
  
      getRecommendedLocations() {
        const sortedLocations = this.allLocations.sort((a, b) => b.number - a.number);
        this.recommendedLocations = sortedLocations.slice(0, 4);
      },
    },
  };
  </script>
  
  <style scoped>
.container {
  width: 70%; /* 界面宽度占据70% */
  margin: 0 auto; /* 居中显示 */
}

.breadcrumb {
  margin-bottom: 20px; /* 左上角面包屑导航的底部间距 */
}

.main-card {
  padding: 20px; /* 卡片内边距 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  border-radius: 8px; /* 边缘圆角 */
}

.content {
  display: flex;
  justify-content: space-between;
}

.location-detail {
  flex: 1; /* 主体内容区域 */
  margin-right: 20px; /* 主体内容区域与推荐卡片之间的间距 */
}

.image-card {
  margin-bottom: 20px; /* 位置图片的底部间距 */
}

.location-image {
  width: 100%; /* 图片宽度自适应 */
  height: auto; /* 高度自适应 */
}

.location-info {
  margin-top: 10px;
  margin-bottom: 20px; /* 位置信息区域的上下间距 */
}

.location-description {
  margin-top: 20px; /* 详细信息区域的顶部间距 */
}

.recommendations {
  width: 300px; /* 推荐区域宽度 */
}

.recommendation-list {
  display: flex;
  flex-direction: column; /* 纵向排列推荐卡片 */
}

.recommendation-item {
  margin-bottom: 20px; /* 推荐项目之间的底部间距 */
}

.recommendation-image {
  width: 100%; /* 推荐卡片图片宽度自适应 */
  height: auto; /* 高度自适应 */
}

.recommendation-name {
  text-align: center; /* 推荐名称居中 */
  margin-top: 10px;
}
</style>
